<template>
  <el-dialog
    v-model="visible"
    v-if="load"
    title="推荐平台站点"
    width="1000px"
    draggable
    @close="close"
    :z-index="2000"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <ProfitTrialInfo ref="ProfitTrialInfoRef" v-model="form"></ProfitTrialInfo>
    <template #footer>
      <span class="dialog-footer w-full flex justify-center py-2">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="save()">保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup name="ProfitTrial">
import { nextTick, reactive, toRefs } from "vue";
import { ElMessage } from "element-plus";
import ProfitTrialInfo from "./BasicInfo/ProfitTrialInfo";

const emits = defineEmits(["fee"]);
const ProfitTrialInfoRef = ref();

const data = reactive({
  form: {
    other_fee: "",
    other_fee_rmb: "",
    currency: "",
    selling_price: "",
    other_fee_currency: "%",
    is_default: 0,
    packing_specification: {
      width: null,
      length: null,
      height: null,
    },
    head_channel_id: "",
    tail_channel_id: "",
  },
  visible: false,
  load: false,
});
const { form, visible, load } = toRefs(data);
const len = ref(0);
const open = async (val) => {
  if (!load.value) {
    load.value = true;
    await 1;
  }
  const { data, length } = val;
  len.value = length;
  if (data) {
    form.value = Object.assign({}, data);
    form.value.packing_specification = data.packing_specification || {
      width: null,
      length: null,
      height: null,
    };
    nextTick(() => {
      const currency_info = {
        currency_id: data.currency_id,
        currency: data.currency_name,
        exchange_rate: data.exchange_rate,
      };
      nextTick(() => {
        ProfitTrialInfoRef.value?.changeCurrency(currency_info, "open");
      });
    });
  } else {
    reset();
  }
  visible.value = true;
};

const save = async () => {
  if (!ProfitTrialInfoRef.value) return;
  if (!form.value.currency_name) return ElMessage.error("请选择币种！");
  ProfitTrialInfoRef.value.validate((valid) => {
    if (valid) {
      if (len.value < 1) form.value.is_default = 1;
      const formData = Object.assign({}, form.value);
      if (!formData.head_freight) {
        formData.head_freight = 0;
      }
      if (!formData.tail_freight) {
        formData.tail_freight = 0;
      }
      if (!formData.commission_rate) {
        formData.commission_rate = 0;
      }
      if (!formData.other_fee) {
        formData.other_fee = 0;
      }
      emits("fee", formData);
      visible.value = false;
    }
  });
};

const reset = () => {
  form.value = {
    selling_price: undefined,
    exchange_rate: undefined,
    currency_id: undefined,
    currency_name: undefined,
    other_fee_currency: "%",
    purchase_quantity: undefined,
    tariff: undefined,
    purchase_cost: undefined,
    gross_weight_g: undefined,
    head_channel: undefined,
    head_freight: undefined,
    head_channel_id: "",
    tail_channel_id: "",
    tail_channel: undefined,
    tail_freight: undefined,
    platform_fee: undefined,
    advertising_rate: undefined,
    refund_rate: undefined,
    other_fee: 0,
    remark: undefined,
    selling_price_rmb: undefined,
    is_default: 0,
    packing_specification: {
      width: null,
      length: null,
      height: null,
    },
  };
};

const close = async () => {
  await ProfitTrialInfoRef.value.clearValidate();
  visible.value = false;
  reset();
};
defineExpose({ open });

onMounted(() => {});
</script>
